<template>
  <div class="pad-20 bgc-default">
    <div class="pad-t-30 pad-l-20 pad-r-20 pad-b-20 bg-color-white">
      <div class="flex flex-between">
        <div class="flex">
          <img class="width-120 height-96" :src="entity.coverImg" alt />
          <div class="color-323232 mar-l-13">
            <div class="color-000000 font-16 mar-b-10">{{entity.roomName}}</div>
            <div class="font-14">开播：{{entity.startDate}}</div>
            <div class="font-14">结束：{{entity.endDate}}</div>
            <div class="font-14">主播：{{entity.anchorName}}</div>
          </div>
        </div>
        <div class="text-c mar-right">
          <div class="font-32 font-blue">{{entity.liveStatusName}}</div>
          <!--<div class="font-18 mar-t-20">直播时长</div>-->
        </div>
      </div>
      <div class="v-align-c mar-t-20">
        <!--<div class="flex-item total-item">
          <div class="color-323232 font-32">{{entity.customerMemberNum}}</div>
          <div class="font-16 mar-t-16">观众总数</div>
        </div>-->

        <div class="flex-item total-item">
          <div class="color-323232 font-32">{{entity.orderNum}}</div>
          <div class="font-16 mar-t-16">成交订单数</div>
        </div>
        <div class="flex-item total-item">
          <div class="color-323232 font-32">￥ {{entity.orderPrice}}</div>
          <div class="font-16 mar-t-16">成交总金额</div>
        </div>
        <div class="flex-item total-item">
          <div class="color-323232 font-32">{{entity.orderMemberNum}}</div>
          <div class="font-16 mar-t-16">购买人数</div>
        </div>
      </div>
    </div>
    <!--列表页-->
    <div class="mar-t-20 bg-color-white">
      <div class="tabs-box">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="直播效果" name="0">
            <line-chart :chart-data="lineDataOne" :chart-type="lineTypeOne" :chart-x="lineXOne"></line-chart>
          </el-tab-pane>
          <el-tab-pane label="获客分析" name="1">
            <customer-analysis v-if="activeName == '1'" :roomId="roomId"></customer-analysis>
          </el-tab-pane>
          <el-tab-pane label="成交订单" name="2">
            <live-order v-if="activeName == '2'" :roomId="roomId"></live-order>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.div-h-c-b {
  height: 80px;
  text-align: center;
  line-height: 80px;
  border-right: 1px solid #8c939d;
  margin-top: 20px;
}
.div-h-c {
  height: 80px;
  text-align: center;
  line-height: 80px;
  margin-top: 20px;
}
.mar-right {
  margin-right: 227px;
}
.color-000000 {
  color: #000000;
}
.color-323232 {
  color: #323233;
}
.total-item {
  height: 128px;
  box-shadow: 0 0 23px rgba(154, 154, 154, 0.15);
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &:last-child {
    margin-right: 0;
  }
}
// 对tabs样式进行修改
.tabs-box {
  /deep/ .el-tabs {
    .el-tabs__nav {
      margin-left: unset;
    }
    .el-tabs__item {
      padding: 0 27px;
      color: #323233;
    }
    // .is-active{
    //   color: #323233;
    // }
  }
  /deep/ .el-tabs--border-card {
    box-shadow: unset;
    border: unset;
  }
}
.refresh-box {
  width: 100px;
  &:hover {
    cursor: pointer;
  }
  i {
    color: #409eff;
  }
}
</style>

<script>
import { pagingLiveDetail, countLiveOrder } from '@/api/user/liveRoom'
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import customerAnalysis from '../components/customer-analysis'
import liveOrder from '../components/live-order'
import LineChart from '@/components/Charts/LineChart'
export default {
  components: { customerAnalysis, liveOrder, LineChart },
  directives: {
    // 拖动窗口
    elDragDialog
  },
  filters: {
    dateFilter(e, e1, e2) {
      if (e != null) {
        return parseInt((new Date(e2).getTime() - new Date(e1).getTime()) / (60 * 1000))
      }
      return e
    },
    dateFilterNum(e, e1, e2, e3) {
      if (e != null && e3 !== '0.00') {
        return (e3 / parseInt((new Date(e2).getTime() - new Date(e1).getTime()) / (60 * 1000))).toFixed(2)
      }
      return e
    }
  },
  data() {
    return {
      dict: {},
      activeName: '0',
      searchListQuery: {
        enterpriseId: this.getEnterpriseId(),
        roomId: '',
        currentPage: 1,
        size: 10,
        orderPrice: '',
        memberNickname: ''
      },
      roomId: '',
      entity: {},
      total: 0,
      liveRoomDetailList: [],
      listLoading: false,
      lineDataOne: {
        oneData: [],
        twoData: [],
        threeData: []
      },
      lineTypeOne: ['支付金额', '支付订单数', '支付人数'],
      lineXOne: [],
      liveTime: ''
    }
  },
  // 初始化页面
  created() {
    const queryParams = this.getCurrentPage().query
    this.entity = queryParams
    this.searchListQuery.roomId = queryParams.roomId
    this.roomId = queryParams.roomId.toString()
    this.handleSearch()
    this.getLiveTime()
  },
  mounted() {
    this.initCount()
  },
  methods: {
    initCount() {
      countLiveOrder(this.roomId, this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.lineDataOne.oneData = response.data.priceList
        this.lineDataOne.twoData = response.data.orderList
        this.lineDataOne.threeData = response.data.memberList
        this.lineXOne = response.data.timeList
      })
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.searchListQuery.currentPage = val
      this.handleSearch()
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.searchListQuery.size = val
      this.handleSearch()
    },
    handleSearch() {
      pagingLiveDetail(this.searchListQuery).then(response => {
        if (response.isError) return
        this.liveRoomDetailList = response.data.records
        this.total = response.data.total
        this.dict = response.data.dict
      })
    },
    resetSearch() {
      this.searchListQuery.currentPage = 1
      this.searchListQuery.orderPrice = ''
      this.searchListQuery.memberNickname = ''
      this.handleSearch()
    },
    // 获取直播时长
    getLiveTime() {
      const startTime = (new Date(this.entity.startDate)).getTime()
      const endTime = (new Date(this.entity.endDate)).getTime()
      const live_time = endTime - startTime
      let h = parseInt((live_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      h = h < 10 ? `0${h}` : h
      let m = parseInt(live_time % (1000 * 60 * 60) / (1000 * 60))
      m = m < 10 ? `0${m}` : m
      let s = live_time % (1000 * 60) / 1000
      s = s < 10 ? `0${s}` : s
      console.log(live_time)
      this.liveTime = `${h}:${m}:${s}`
    }
  }
}
</script>
